<%@ page contentType="text/html;charset=UTF-8" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>在线商城 - 用户首页</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/user.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <script>
        // 控制购物车侧边栏的显示/隐藏
        function toggleCart() {
            const cartSidebar = document.getElementById('cart-sidebar');
            cartSidebar.classList.toggle('open');
        }

        // 添加商品到购物车
        function addToCart(productId, productName, price) {
            // 实际项目中这里应该发送AJAX请求到服务器
            alert(`已添加 ${requestScope.productName} 到购物车`);

            // 更新购物车图标上的数量
            const cartCount = document.getElementById('cart-count');
            cartCount.textContent = parseInt(cartCount.textContent) + 1;

            // 更新侧边栏购物车
            const cartItems = document.getElementById('cart-items');
            const newItem = document.createElement('div');
            newItem.className = 'cart-item';
            newItem.innerHTML = `
                <div class="item-info">
                    <h4>${requestScope.productName}</h4>
                    <p>¥<fmt:formatNumber value="${requestScope.price}" pattern="#,##0.00"/></p>
                </div>
                <button class="remove-item"><i class="fas fa-trash"></i></button>
            `;
            cartItems.appendChild(newItem);

            // 更新总计
            updateTotal(price);
        }

        // 更新购物车总计
        function updateTotal(price) {
            const totalElement = document.getElementById('cart-total');
            const currentTotal = parseFloat(totalElement.textContent.replace('¥', ''));
            const newTotal = currentTotal + parseFloat(price);
            totalElement.textContent = '¥' + newTotal.toFixed(2);
        }
    </script>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="user-header">
    <div class="container">
        <a href="${pageContext.request.contextPath}/user_home" class="logo">
            <i class="fas fa-shopping-bag"></i> 在线商城
        </a>

        <!-- 修改顶部导航栏的搜索框 -->
        <div class="search-box">
            <form action="${pageContext.request.contextPath}/user_home" method="get">
                <input type="text" name="search" placeholder="搜索商品..."
                       value="${not empty param.search ? param.search : ''}">
                <c:if test="${not empty requestScope.selectedCategory}">
                    <input type="hidden" name="category" value="${requestScope.selectedCategory}">
                </c:if>
                <button type="submit"><i class="fas fa-search"></i></button>
            </form>
        </div>

        <div class="user-actions">
            <div class="cart-icon" onclick="toggleCart()">
                <i class="fas fa-shopping-cart"></i>
                <span id="cart-count">0</span>
            </div>

            <div class="user-dropdown">
                <button class="user-btn">
                    <i class="fas fa-user-circle"></i> ${sessionScope.user.username}
                </button>
                <div class="dropdown-content">
                    <a href="${pageContext.request.contextPath}/profile"><i class="fas fa-user"></i> 个人中心</a>
                    <a href="${pageContext.request.contextPath}/orders"><i class="fas fa-list"></i> 我的订单</a>
                    <a href="${pageContext.request.contextPath}/logout"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- 商品展示区 -->
<div class="user-container">
    <div class="category-filter">
        <h2>商品分类</h2>
        <ul>
            <c:forEach items="${requestScope.categories}" var="cat">
                <li class="${requestScope.selectedCategory eq cat ? 'active' : ''}">
                    <a href="${pageContext.request.contextPath}/user_home?category=${cat}">${cat}</a>
                </li>
            </c:forEach>
        </ul>
    </div>
    <!-- 在商品展示区上方添加搜索提示 -->
    <div class="search-results-header">
        <c:if test="${not empty requestScope.searchKeyword}">
            <h2>搜索结果: "${requestScope.searchKeyword}"</h2>
            <p>找到 ${fn:length(requestScope.products)} 个商品</p>
        </c:if>
        <c:if test="${not empty requestScope.selectedCategory && requestScope.selectedCategory != '全部商品'}">
            <h2>分类: ${requestScope.selectedCategory}</h2>
        </c:if>
    </div>
    <div class="product-grid">
        <c:forEach items="${requestScope.products}" var="product">
            <div class="product-card">
                <div class="product-image">
                    <c:if test="${not empty product.image}">
                        <img src="${pageContext.request.contextPath}/uploads/${product.image}" alt="${product.name}">
                    </c:if>
                    <c:if test="${empty product.image}">
                        <div class="no-image">
                            <i class="fas fa-image"></i>
                        </div>
                    </c:if>
                </div>
                <div class="product-info">
                    <h3>${product.name}</h3>
                    <p class="product-price">¥<fmt:formatNumber value="${product.price}" pattern="#,##0.00"/></p>
                    <p class="product-stock">库存: ${product.stock}件</p>
                    <button class="add-to-cart"
                            onclick="addToCart(${product.productId}, '${product.name}', ${product.price})">
                        <i class="fas fa-cart-plus"></i> 加入购物车
                    </button>
                </div>
            </div>
        </c:forEach>
    </div>
</div>

<!-- 购物车侧边栏 -->
<div id="cart-sidebar" class="cart-sidebar">
    <div class="cart-header">
        <h3>我的购物车</h3>
        <button class="close-cart" onclick="toggleCart()">
            <i class="fas fa-times"></i>
        </button>
    </div>

    <div id="cart-items" class="cart-items">
        <!-- 购物车商品将通过JavaScript动态添加 -->
        <div class="empty-cart">
            <i class="fas fa-shopping-cart"></i>
            <p>购物车是空的</p>
        </div>
    </div>

    <div class="cart-footer">
        <div class="cart-total">
            <span>总计:</span>
            <span id="cart-total">¥0.00</span>
        </div>
        <button class="checkout-btn">结算</button>
    </div>
</div>

<!-- 页脚 -->
<footer class="user-footer">
    <div class="container">
        <p>&copy; 2025 在线商城系统 | 版权所有</p>
        <p>客服电话: 400-123-4567 | 服务时间: 9:00-22:00</p>
    </div>
</footer>
</body>
</html>